import React from "react";
import styles from '@/assets/css/detail.module.css';
import { TMap } from '@map-component/react-tmap';
import type room from "@/types/room";
import type comment from "@/types/comment";
import type business from "@/types/business";

const Info = () => {
  const [info, SetInfo] = useState<room>({} as room);
  const [CommentList, SetCommentList] = useState<comment[]>([]);
  const [searchParams] = useSearchParams();
  const [roomid] = useState<string>(searchParams.get('roomid') ?? '');
  const [business] = useState<business>(React.business);

  // 挂载 监听roomid
  useEffect(() => {
    GetInfoData();
  }, [roomid]);

  // 获取房间详情数据
  const GetInfoData = async () => {
    // 组装参数
    const params = {
      roomid
    }
    // 发起请求
    const result = await React.Http.post('/room/info', params);
    // 处理请求结果
    if (result.code === 1) {
      SetInfo(result.data.room);
      SetCommentList(result.data.CommentList);
    } else {
      React.fail(result.msg, () => {
        React.navigate(-1);
      });
    }
  }

  // 立即预订
  const OnConfirm = () => {
    // 检查登录
    if (!business || Object.getOwnPropertyNames(business).length === 0) {
      React.UI.Dialog.confirm({
        title: '登录',
        content: '是否跳转登录界面？',
        onConfirm: () => {
          React.navigate('/business/login');
        }
      })
      return;
    }
    // 跳转到确认页面
    React.navigate(`/room/confirm?roomid=${roomid}`);
  }

  // 立即预订的按钮样式
  const ConfirmBtn = () => {
    if (info.status === true) {
      return (
        <React.UI.Button color='primary' shape='rounded'>已预定</React.UI.Button>
      )
    } else {
      return (
        <React.UI.Button onClick={OnConfirm} color='primary' shape='rounded'>立即预定</React.UI.Button>
      )
    }
  }

  return (
    <>
      <React.UI.Image src={info.thumb_text} height={213} fit='cover' />

      <div className={styles.detail_top}>
        <div id="intro" className={styles.intro}>
          <div className={styles.title}>{info.name}</div>
          <div className={styles.betwee}>
            <div className={styles.left}>
              {info.flag && JSON.parse(info.flag).map((val: string, index: number) => {
                return (
                  <span key={index}>{val}</span>
                )
              })}
            </div>
          </div>
          <div className={styles.title}>{info.content}</div>
        </div>
        {/* 预定须知 */}
        <div className={styles.notesin}>
          <div className={styles.title}>预订须知</div>
          <div className={styles.item}>
            <span className={styles.tips}>预订房型：</span>
            <span>新房特惠</span>
          </div>
          <div className={styles.item}>
            <span className={styles.tips}>入离时间：</span>
            <span>当天 12:00 后入住，次日 12:00 前退房</span>
          </div>
          <div className={styles.item}>
            <span className={styles.tips}>剩余房间数量：</span>
            <span>{info.total}</span>
          </div>
        </div>

        {/* 地图 */}
        <div className={styles.notesin}>
          <TMap
            mapKey="TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ"
            center={{ lat: 39.984104, lng: 116.307503 }}
            version='1.exp'
          />
        </div>

        {/* 评价 */}
        <div id="comment" className={styles.comment}>
          <div className={styles.title}>评价</div>
          <React.UI.List style={{ '--border-top': '0', '--border-bottom': '0' }}>
            {CommentList.map((item: comment) => (
              <div className={styles.rate_list_item} key={item.id}>
                <div className={styles.item_content}>
                  <div className={styles.content_prefix}>
                    <div className={styles.ratelist}>
                      <div className={styles.image}>
                        <img src={'/assets/images/avatar.png'} alt="" />
                      </div>
                      <p className={styles.nickname}>{item.business.nickname}</p>
                    </div>
                  </div>
                  <div className={styles.content_main}>
                    <div className={styles.rate}>
                      <React.UI.Rate readOnly value={item.rate} style={{ '--star-size': '18px' }} />
                    </div>
                    <div className={styles.item_description}>
                      <p>{item.content}</p>
                      <p className={styles.item_time}>{item.createtime_text}</p>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </React.UI.List>

          {/* 跳转到更多评论页面 */}
          <React.UI.AutoCenter>
            <Link to="#">查看更多评价</Link>
          </React.UI.AutoCenter>
        </div>
      </div>

      {/* 底部总价和确认按钮 */}
      <div className={styles.foot_bar}>
        <div className={styles.price}>
          ￥{info.price}
        </div>
        <ConfirmBtn />
      </div>
    </>
  );
}

export default Info;